<template>
	<view>
		<!-- 弹出层 -->
		<view class="uni-banner" style="background:#FFFFFF;" v-if="bannerShow">
			<view style="justify-content:flex-end;">
				<view style="justify-content:flex-end; text-align:right; padding:20upx;">
					<text class="uni-icon uni-icon-close"></text>
				</view>
			</view>
			<view class="Lu-fk-infor">
				<view class="clearfix Lu-fk-user">
					<text class="iconfont icon-fkyh fl"></text><input v-model="user.name" class="Lu-fk-name fl" type="text">
				</view>
				<view class="clearfix Lu-fk-phone">
					<text class="iconfont icon-fksj fl"></text><input v-model="user.phone" class="Lu-fk-phone1 fl" type="number">
				</view>
				<view class="Lu-fk-zy">{{content}}</view>
			</view>
			<view style="padding:50upx 0; padding-bottom:68upx;">
				<button type='warn' open-type="getUserInfo" @click="updatauser" @getuserinfo="mpGetUserInfo" style="background:#F6644D; margin:0 80upx;">提交</button>
			</view>
		</view>
		<view class="uni-mask" v-if="bannerShow"></view>
		<!-- 弹出层 -->
	</view>
</template>
<script>
    //保存登陆态
    var SESSION_KEY = 'denglutai'
	export default {
		data() {
			return {
				bannerShow: false,
				user:{
					name:'',
					phone:''
				},
				content:'注意:请填写使用者真实信息!'
			}
		},
		created() {
			var session = uni.getStorageSync(SESSION_KEY)
			//如果存在session，已经登陆
			if (session) {
				//检测当前用户登录态是否有效
				var that = this
				uni.checkSession({
					success: function() {
						that.bannerShow = false;
					},
					fail: function() {
						uni.removeStorageSync(SESSION_KEY);
						that.bannerShow = true;
					},
				});
			} else {
				this.bannerShow = true;
			}
		},
		onBackPress() { //app,h5 按返回键触发
			if (this.bannerShow) {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		},
		methods: {
			updatauser(){
				if(this.user.name == '' || this.user.phone == ''){
					this.content = '请输入正确信息'
				}else{
					this.$emit("user", this.user,false);
					uni.setStorage({
						key: 'user',
						data: this.user
					})
					uni.showModal({
						title:"信息填写成功，去支付",
						content:"信息填写成功，去支付"
					})
				}
			},
			closeBanner: function() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			mpGetUserInfo(result) {
				var that = this
				if (result.detail.errMsg === 'getUserInfo:ok') {
				//小程序返回登陆态，code等，后续需要调用自己的api处理
					uni.setStorageSync(SESSION_KEY,result.authResult)
					that.bannerShow = false;
				} else {
					uni.showModal({
						title: '请授权后查看'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	/* 遮罩层 */
	.uni-mask {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 9998;
	}

	/* 弹出层形式的广告 */
	.uni-banner {
		width: 80%;
		position: fixed;
		left: 50%;
		top: 50%;
		background: #FFF;
		border-radius: 10upx;
		z-index: 9999;
		transform: translate(-50%, -50%);
	}
	.Lu-fk-infor{
		margin-left: 30rpx;
		.Lu-fk-user{
			height: 64rpx;
			line-height: 64rpx;
			text{
				color: #0084ff;
				font-size: 28rpx;
			}
			.Lu-fk-name{
				width: 450rpx;
				height: 64rpx;
				background-color: #f5f5f5;
				margin-left: 24rpx;
				border-radius: 10rpx;
			}
		}
		.Lu-fk-phone{
			height: 64rpx;
			line-height: 64rpx;
			margin-top: 40rpx;
			text{
				color: #0084ff;
				font-size: 34rpx;
			}
			.Lu-fk-phone1{
				width: 450rpx;
				height: 64rpx;
				background-color: #f5f5f5;
				margin-left: 24rpx;
				border-radius: 10rpx;
			}
		}
		.Lu-fk-zy{
			font-size: 24rpx;
			color: #ff0000;
			margin-top: 20rpx;
			margin-left: 70rpx;
		}
	}
</style>
